<template>
  <!-- 商品清洗 -->
  <view>
    <view>
      <uni-nav-bar
        left-icon="back"
        title="清洗中"
        fixed="ture"
        statusBar="true"
        @clickLeft="handleClick"
      ></uni-nav-bar>
      <!-- 空 -->
      <view class="" v-if="tobeclean.length === 0">
        <u-empty></u-empty>
      </view>
      <!-- 会员卡列表 -->
      <view v-else class="cardlist">
        <view class="card-item" v-for="(item, index) in tobeclean" :key="index">
          <!-- 复选框 -->

          <checkbox-group @change="changeitem(item)" checked class="checkbox"
            ><checkbox :checked="item.checked"
          /></checkbox-group>
          <view class="subitem">
            <view>标题:</view>
            <view>{{ item.goods.title }}</view>
          </view>
          <view class="subitem"
            ><view>商品规格:</view>
            <view>{{ item.goodssku.sku_value }}</view></view
          >
          <view class="subitem"
            ><view>货号:</view> <view>{{ item.goods.art_no }}</view></view
          >
          <view class="subitem"
            ><view>创建时间:</view>
            <view>{{ item.createtime_text }}</view></view
          >
          <!-- 可租赁数量 -->
          <view class="subitem"
            ><view>清洗时间:</view>
            <view v-if="item.cleartime_text">{{ item.cleartime_text }}</view>
            <view v-else>--</view>
          </view>

          <view class="subitem"
            ><view>取回时间:</view>
            <view v-if="item.gettime_text">{{ item.gettime_text }}</view>
            <view v-else>--</view>
          </view>

          <view class="subitem"><view>状态:</view> <view>清洗中</view></view>
          <view class="subitem"
            ><view>洗衣店名:</view>
            <view v-if="item.storeclear.name">{{ item.storeclear.name }}</view>
            <view v-else>--</view>
          </view>
          <view class="subitem"
            ><view>洗衣店位置:</view>
            <view v-if="item.storeclear.address">{{
              item.storeclear.address
            }}</view>
            <view v-else>--</view>
          </view>
          <!-- 操作 -->
          <view class="action">
            <!-- 取回商品 -->
            <!-- <view class="action-btn">取回商品</view> -->
          </view>
        </view>
      </view>
      <!-- 加载中 -->
      <text class="loading-text">
        {{
          loadingType === 0
            ? contentText.contentdown
            : loadingType === 1
            ? contentText.contentrefresh
            : contentText.contentnomore
        }}
      </text>
    </view>
    <!-- 送洗操作 -->
    <view class="jiesuan">
      <view class="pay-btn">
        <checkbox-group style="margin-right: 20rpx" @change="selectAll"
          ><checkbox :checked="allChecked">全选</checkbox></checkbox-group
        >
        <u-button
          @click="handleReturn()"
          type="primary"
          shape="circle"
          size="medium"
          >取回商品</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
// 点击根据索引传不同的状态
var pageIndex = 1;

export default {
  data() {
    return {
      checkList: [], //选中值
      allChecked: false, //是否全选
      tobeclean: [],
      washingstatus: 2,

      loadingType: 0,
      contentText: {
        contentdown: "上拉显示更多",
        contentrefresh: "正在加载...",
        contentnomore: "没有更多数据了",
      },
    };
  },
  methods: {
    handleClick() {
      console.log("返回");
      uni.reLaunch({
        url: "../clear/clear",
      });
    },
    // 取回商品
    handleReturn() {
      var that = this;
      that.checkList = [];
      that.tobeclean.map((item) => {
        if (item.checked) {
          return that.checkList.push(item.id);
        }
      });
      uni.showModal({
        title: "提示",
        content: "确认取回商品吗?",
        success: function (res) {
          if (res.confirm) {
            console.log("用户点击确定");
            uni.request({
              url: "http://gxyckf.1qit.com/api/admin.clear/getClear", //仅为示例，并非真实接口地址。
              data: {
                id: that.checkList,
              },
              method: "POST",
              header: {
                token: uni.getStorageSync("token"),
              },
              success: (res) => {
                if (res.data.code == 1) {
                  uni.showToast({
                    title: res.data.msg,
                    icon: "success",
                    duration: 2000,
                  });
                  that.getInitializeList();
                  location.reload();
                }
              },
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },

    //单选
    changeitem(item) {
      console.log(item);
      item.store_clear_id;
      item.checked = !item.checked;
      if (!item.checked) {
        this.allChecked = false;
      } else {
        // 判断每一个商品是否是被选择的状态
        const cartList = this.tobeclean.every((item) => {
          return item.checked === true;
        });
        if (cartList) {
          this.allChecked = true;
        } else {
          this.allChecked = false;
        }
      }
    },
    //全选，全不选
    selectAll() {
      this.allChecked = !this.allChecked;
      if (this.allChecked) {
        this.tobeclean.map((item) => {
          item.checked = true;
        });
      } else {
        this.tobeclean.map((item) => {
          item.checked = false;
        });
      }
    },
    // 查看待清洗列表(原有)
    getInitializeList() {
      const that = this;
      pageIndex = 1;
      uni.request({
        url: "http://gxyckf.1qit.com/api/admin.clear/list", //仅为示例，并非真实接口地址。
        data: {
          status: that.washingstatus,
          page: pageIndex,
        },
        method: "POST",
        header: {
          token: uni.getStorageSync("token"),
        },
        success: (res) => {
          console.log(res.data.data);
          that.tobeclean = res.data.data.data;
          uni.hideNavigationBarLoading();
          uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
        },
      });
    },
    // 查看待清洗列表(加载更多)
    getMoreInitializeList() {
      // 加载更多列表
      const that = this;
      pageIndex++;
      if (that.loadingType != 0) {
        return false; //loadingType!=0;直接返回
      }
      that.loadingType = 1;
      uni.showNavigationBarLoading();
      uni.request({
        url: "http://gxyckf.1qit.com/api/admin.clear/list",
        method: "POST",
        data: {
          status: that.washingstatus,
          page: pageIndex,
        },
        header: {
          token: uni.getStorageSync("token"),
        },
        success(res) {
          if (that.tobeclean.length == res.data.data.total) {
            that.loadingType = 2;
            uni.hideNavigationBarLoading(); //关闭加载动画
            return false;
          }
          that.tobeclean = that.tobeclean.concat(res.data.data.data);
          that.loadingType = 0; //将loadingType归0重置
          uni.hideNavigationBarLoading(); //关闭加载动画
        },
      });
    },
  },
  mounted() {},
  onLoad() {
    // 原有列表
    this.getInitializeList();
  },
  /*下拉刷新*/
  onPullDownRefresh() {
    this.getInitializeList();
  },
  onReachBottom() {
    this.getMoreInitializeList();
    console.log("滚到到底部了");
  },
};
</script>

<style scoped>
.subitem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 0;
}
.cardlist {
  background: #fff;
  padding: 40rpx;

  /* overflow-y: auto; */
  /* height: 260rpx; */
}
.card-item {
  color: #fff;
  font-size: 30rpx;
  font-weight: 600;
  background: #2979ff;
  padding: 10rpx;
  box-shadow: 0 0 30rpx #ddd;

  border-radius: 20rpx;
  margin-bottom: 20rpx;
}
.action {
  display: flex;
  justify-content: flex-end;
}
.action-btn {
  width: 120rpx;
  text-align: center;
  height: 40rpx;
  line-height: 40rpx;
  margin: 0 5rpx;

  border-radius: 20rpx;

  background: #fff;
  color: #2979ff;
}
.loading-text {
  height: 80upx;
  line-height: 80upx;
  font-size: 25upx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.jiesuan {
  overflow: hidden;
  width: 100%;
  position: fixed;
  box-shadow: 0 0 20rpx #ccc;
  background: #fff !important;
  padding-top: 10rpx;
  bottom: 0;
  right: 0;
  z-index: 9999;
}
.pay-btn {
  text-align: right;
  justify-content: flex-end;
  padding-top: 30rpx;
  display: flex;
  align-items: center;
}
</style>
